<script setup>
import {onMounted, ref} from 'vue';
import luckysheet from "luckysheet";
import AnalyesAPI from "@/api/system/analyes.ts";
import {useAnalysetStore} from "@/store/index.ts";
import dayjs from "dayjs";
import {transCdata, processData} from "@/utils/method";
import FluorideB from "@/components/analysisSheetComponents/waterCapacity/tmpl65/index.vue";

let options = {
  container: "luckysheet", //luckysheet为容器id
  lang: 'zh',
  autoCalculate: true,
  data: [
    {
      "name": "", // 工作表名称
      "color": "", // 工作表颜色
      "index": 0, // 工作表索引
      "status": 1, // 激活状态
      "order": 0, // 工作表的下标
      "column": 11, // 列数
      "defaultRowHeight": 30, // 自定义行高
      "defaultColWidth": 100, // 自定义列宽
      "celldata": [
        // 初始化表格数据，第一行包含表头
        {"r": 0, "c": 0, "v": "样品编号", "style": {"ht": 0, "vt": 0}}, // A1
        {"r": 0, "c": 1, "v": "类型", "style": {"ht": 0, "vt": 0}}, // A1
        {"r": 0, "c": 2, "v": "样品体积Vw(mL)", "style": {"ht": 0, "vt": 0}}, 
        {"r": 0, "c": 3, "v": "萃取溶剂体积V0(mL)", "style": {"ht": 0, "vt": 0}}, 
        {"r": 0, "c": 4, "v": "萃取液稀释倍数D1", "style": {"ht": 0, "vt": 0}}, 
        {"r": 0, "c": 5, "v": "萃取液稀释倍数D2", "style": {"ht": 0, "vt": 0}},
        {"r": 0, "c": 6, "v": "萃取液浓度mg/L", "style": {"ht": 0, "vt": 0}}, 
        {"r": 0, "c": 8, "v": "样品浓度mg/L", "style": {"ht": 0, "vt": 0}},  
        {"r": 0, "c": 11, "v": "测定结果", "style": {"ht": 0, "vt": 0}}, 
        {"r": 0, "c": 12, "v": "备注", "style": {"ht": 0, "vt": 0}}, 
        //第二行
        {"r": 1, "c": 6, "v": "油类c1", "style": {"ht": 0, "vt": 0}}, 
        {"r": 1, "c": 7, "v": "石油类c2", "style": {"ht": 0, "vt": 0}}, 
        {"r": 1, "c": 8, "v": "油类ρ1", "style": {"ht": 0, "vt": 0}}, 
        {"r": 1, "c": 9, "v": "石油类ρ2", "style": {"ht": 0, "vt": 0}}, 
        {"r": 1, "c": 10, "v": "动植物油类ρ3", "style": {"ht": 0, "vt": 0}}, 
      ], // 初始化数据
      "config": {
        "merge": {
          "0_0":{
            "r": 0, // 起始行
            "c": 0, // 起始列
            "rs": 2, // 跨越的行数
            "cs": 1  // 跨越的列数
          }, 
          "0_1":{
            "r": 0, // 起始行
            "c": 1, // 起始列
            "rs": 2, // 跨越的行数
            "cs": 1  // 跨越的列数
          }, 
          "0_2":{
            "r": 0, // 起始行
            "c": 2, // 起始列
            "rs": 2, // 跨越的行数
            "cs": 1  // 跨越的列数
          }, 
          "0_3":{
            "r": 0, // 起始行
            "c": 3, // 起始列
            "rs": 2, // 跨越的行数
            "cs": 1  // 跨越的列数
          }, 
          "0_4":{
            "r": 0, // 起始行
            "c": 4, // 起始列
            "rs": 2, // 跨越的行数
            "cs": 1  // 跨越的列数
          }, 
          "0_5":{
            "r": 0, // 起始行
            "c": 4, // 起始列
            "rs": 2, // 跨越的行数
            "cs": 1  // 跨越的列数
          }, 
          "0_6":{
            "r": 0, // 起始行
            "c": 6, // 起始列
            "rs": 1, // 跨越的行数
            "cs": 2  // 跨越的列数
          }, 
          "0_8":{
            "r": 0, // 起始行
            "c": 8, // 起始列
            "rs": 1, // 跨越的行数
            "cs": 3  // 跨越的列数
          }, 
          "0_11":{
            "r": 0, // 起始行
            "c": 11, // 起始列
            "rs": 2, // 跨越的行数
            "cs": 1  // 跨越的列数
          }, 
          "0_12":{
            "r": 0, // 起始行
            "c": 12, // 起始列
            "rs": 2, // 跨越的行数
            "cs": 1  // 跨越的列数
          }, 
        }, // 合并单元格
        "rowlen": {}, // 表格行高
        "columnlen": { // 设置列宽
          "0": 200,
          "1": 150, 
          "2": 150, 
          "3": 150, 
          "4": 150, 
          "5": 150, 
          "6": 150, 
          "7": 150, 
          "8": 150, 
          "9": 150, 
          "10": 150, 
          "11": 150, 
          "12": 150, 
        }, // 表格列宽
      },
    }
  ],
  showinfobar: false, // 隐藏信息栏
  showtoolbar: true, // 隐藏工具栏
};
const waterForm = ref({
  bdatas: {
    jhdcd: [
      {ypbh: '', cdjg: '', xd: '', zkyq: '', sfhg: ''},
      {ypbh: '', cdjg: '', xd: '', zkyq: '', sfhg: ''},
      {ypbh: '', cdjg: '', xd: '', zkyq: '', sfhg: ''},
    ],
  },
  kbycd: [
    {kb_ypbh: '', kb_ypnd: '', kb_zkyq: '', kb_sfhg: ''},
    {kb_ypbh: '', kb_ypnd: '', kb_zkyq: '', kb_sfhg: ''},
    {kb_ypbh: '', kb_ypnd: '', kb_zkyq: '', kb_sfhg: ''},
    {kb_ypbh: '', kb_ypnd: '', kb_zkyq: '', kb_sfhg: ''},
  ],
  unit: {}
})
const sheetData = ref('')
const switchAB = ref(true)
const checkTime = ref('')
const processedData = ref([])
const cdatas = ref([])
const checkDialogVisible = ref(false)
const analyseStatusPage = useAnalysetStore()
const record_sn = analyseStatusPage.waterForm.record_sn
// 在组件挂载后初始化 Luckysheet
onMounted(() => {
  // 初始化表格
  luckysheet.create(options);
//   获取表单信息
  getWaterCapacity()
});

// 用于获取最新的表格数据
const getUpdatedData = () => {
  checkDialogVisible.value = true
};
const handleCheckClose = () => {
  checkDialogVisible.value = false
}

//获取表单信息
const getWaterCapacity = () => {
  let josn = {
    // id: analyseStatusPage.waterForm.id,
    id: 15,
    // record_sn: record_sn,
    record_sn: 65,
  }
  AnalyesAPI.getAnalyseACapacity(josn).then(data => {
    console.log('获取水质容量 A单', data)
    waterForm.value = data
    sheetData.value = data.configs
    options.data = sheetData.value
    luckysheet.create(options);
    processedData.value = data.adatas
  })
}

//加载本地数据
const loadDataFromLocal = () => {
  sheetData.value = luckysheet.getLuckysheetfile();
  options.data = sheetData.value; // 将字符串解析为 JSON
  console.log(options.data)
  const data = options.data[0].data.map(row => {
    return row
        .map(cell => {
          return cell ? {
            field: cell.m || "默认字段",
            value: cell.v || null
          } : null;
        })
        .filter(cell => cell !== null); // 删除 null 值
  });
  console.log(data);
  // 调用函数
  processedData.value = processData(data);
  console.log('aghsduiahsuidhaiu', processedData.value);
  cdatas.value = transCdata(processedData.value)
  console.log(cdatas.value)

//   调接口拿数据
  AnalyesAPI.addWaterCapacity({
    ...waterForm.value,
    // record_sn: record_sn,
    record_sn: 65,
    // id: analyseStatusPage.waterForm.id,
    task_id: analyseStatusPage.waterForm.taskId,
    configs: sheetData.value,
    add_form_id: analyseStatusPage.waterForm.add_form_id,
    adatas: processedData.value,
    cdatas: cdatas.value
  }).then(data => {
    console.log('调接口拿数据', data)
    ElMessage.success('提交成功！')
  })
};


// 确认提交校核
const handleSubmit = () => {
  console.log(checkTime.value)
  const formattedDate = checkTime.value ? dayjs(checkTime.value).format('YYYY-MM-DD') : '';
  console.log(analyseStatusPage.waterForm.id)
  AnalyesAPI.handleCheckTimeData({
    id: analyseStatusPage.waterForm.add_form_id,
    submit_date: formattedDate
  }).then(data => {
    if (data === 1) {
      ElMessage.success('提交成功！')
      checkDialogVisible.value = false
    }
  })
}
//切换AB面
const handleSwitch = () => {
  switchAB.value = !switchAB.value
}
</script>

<template>
  <div class="card">
  <div v-show="switchAB">
    <el-card class="box-card">
      <h1 style="text-align: center">水质 红外分光光度法分析原始记录（A面）</h1>
      <div>SXLPHJ/JL/CX-22-65</div>
      <table class="table">
        <tr>
          <td>任务编号</td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.task_name"/>
          </td>
          <td>采样日期</td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.sampling_time"/>
          </td>
          <td>分析日期</td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.anal_time"/>
          </td>
          <td>样品类别</td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.category_id">
            </el-input>
          </td>
        </tr>
        <tr>
          <td>分析仪器</td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.device_name"/>
          </td>
          <td>仪器型号</td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.device_model"/>
          </td>
          <td>仪器编号</td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.device_number"/>
          </td>
          <td>环境条件</td>
          <td>
            <div>
                <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                          v-model="waterForm.temperature">
                  <template #append>
                    <span style="background-color: transparent;color: black">℃</span>
                  </template>
                </el-input>
                <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                          v-model="waterForm.humidity">
                  <template #append>
                    <span style="background-color: transparent;color: black">%RH</span>
                  </template>
                </el-input>
              </div>
          </td>
        </tr>
        <tr>
          <td>分析方法</td>
          <td colspan="3">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.method"/>
          </td>
          <td>萃取溶剂</td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.cqrj"/>
          </td>
          <td>检 出 限</td>
          <td>
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="0.06mg/L"
                      v-model="waterForm.limit_val"/>
          </td>
        </tr>
        <tr>
          <td>计算公式</td>
          <td colspan="7">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
            v-model="waterForm.js_formula"/>
          </td>
        </tr>
      </table>
      <div id="luckysheet" style="width:100%;height:500px;"></div>
      <table class="table">
        <tr>
          <td style="width: 3%;">备注</td>
          <td colspan="7">
            <el-input style="width: 100%;border: 1px solid transparent" placeholder="请输入"
                      v-model="waterForm.notes"/>
          </td>
        </tr>
      </table>
    </el-card>
  </div>
    <div v-show="!switchAB">
      <fluoride-b :waterForm="waterForm"></fluoride-b>
    </div>

    <el-card class="box-card" style="margin-top: 30px">
      <div style="display: flex;justify-content: space-between;">
        <!--        占位盒子-->

        <el-button @click="handleSwitch">
          {{ switchAB ? 'B面' : 'A面' }}
        </el-button>

        <div>
          <el-button>取消</el-button>
          <!--          <el-button>新增</el-button>-->
          <!--          <el-button>复制并新增</el-button>-->
          <el-button @click="loadDataFromLocal">保存</el-button>
          <el-button type="primary" @click="getUpdatedData">提交</el-button>
        </div>
      </div>
    </el-card>
    <!--    提交校核-->
    <el-dialog title="提交校核" v-model="checkDialogVisible" width="30%" center
               :before-close="handleCheckClose">
      <div class="check">
        <!--        头部-->
        <div class="check-header" style="display: flex;align-items: center;margin-bottom: 20px">
          <p>表单填写日期：</p>
          <el-date-picker
              style="border: 1px solid #cccccc;border-radius: 6px;width: 70%;"
              type="date"
              placeholder="请选择"
              v-model="checkTime"
          />
        </div>
        <div class="check-footer">
          <el-button style="width: 48%;" @click="handleCheckClose">取消</el-button>
          <el-button type="primary" style="width: 48%;" @click="handleSubmit">确认</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<style scoped>
.card {
  padding: 20px 25px;
}

.table {
  width: 100%;
  border-collapse: collapse; /* 表格边框合并 */
  text-align: left; /* 默认左对齐 */
  font-size: 14px; /* 字体大小 */
  color: #606266; /* 默认字体颜色 */
}

.table th,
.table td {
  border: 1px solid #c2bfbf; /* 表格单元格边框颜色 */
  padding: 12px; /* 单元格内边距 */
}

.table th {
  background: #f5f7fa; /* 表头背景色 */
  font-weight: 600; /* 表头字体加粗 */
  color: #303133; /* 表头字体颜色 */
  text-align: center; /* 表头居中 */
}

.table td {
  width: 15%;
}

.table-td {
  display: flex;
  justify-content: center;
}


::v-deep .el-input__wrapper {
  background-color: transparent;
  box-shadow: none;
  flex-direction: row-reverse;
}

::v-deep .el-select__wrapper {
  background-color: transparent;
  box-shadow: none;
}

::v-deep .el-input-group__append {
  background-color: transparent;
  box-shadow: none;
}
</style>
